import { StyleSheet, Dimensions } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    content: {
        flex: 1,
        padding: 10,
    },
    searchContainer: {
        marginBottom: 7,
    },
    searchWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#e0e0e0',
    },
    searchInput: {
        flex: 1,
        paddingHorizontal: 16,
        paddingVertical: 12,
        fontSize: 16,
        backgroundColor: 'transparent',
    },
    listContainer: {
        paddingBottom: 20,
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 16,
        marginBottom: 12,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
        position: 'relative',
    },
    cardHeader: {
        marginBottom: 12,
    },
    headerRow: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 8,
    },
    cardContent: {
        marginBottom: 12,
    },
    label: {
        fontSize: 14,
        color: '#666',
        marginRight: 8,
        minWidth: 60,
    },
    value: {
        fontSize: 14,
        color: '#333',
        flex: 1,
        fontWeight: '500',
    },
    bodyItem: {
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        padding: 12,
        marginBottom: 8,
    },
    bodyItemHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    bodyItemLeft: {
        flexDirection: 'row',
        flex: 1,
    },
    imagePlaceholder: {
        width: 60,
        height: 60,
        backgroundColor: '#e0e0e0',
        borderRadius: 6,
        marginRight: 12,
    },
    productImage: {
        width: 60,
        height: 60,
        borderRadius: 6,
        marginRight: 12,
        backgroundColor: '#f0f0f0',
    },
    bodyItemInfo: {
        flex: 1,
    },
    bodyItemLabel: {
        fontSize: 12,
        color: '#666',
        marginBottom: 2,
    },
    bodyItemValue: {
        fontSize: 12,
        color: '#333',
        marginBottom: 2,
        fontWeight: '500',
    },

    expandedDetails: {
        marginTop: 12,
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#eee',
    },
    detailsContent: {
        flex: 1,
    },
    detailRow: {
        flexDirection: 'row',
        marginBottom: 4,
    },
    detailLabel: {
        fontSize: 12,
        color: '#666',
        minWidth: 60,
    },
    detailValue: {
        fontSize: 12,
        color: '#333',
        flex: 1,
    },

    expandButton: {
        alignSelf: 'center',
        paddingVertical: 8,
        paddingHorizontal: 16,
        marginTop: 8,
    },
    expandButtonText: {
        color: '#0076ff',
        fontSize: 14,
        fontWeight: '500',
    },
    bottomActions: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 12,
        paddingTop: 12,
        borderTopWidth: 1,
        borderTopColor: '#eee',
    },
    confirmButton: {
        backgroundColor: '#007AFF',
        borderRadius: 6,
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    confirmButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: '500',
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    loadingText: {
        fontSize: 16,
        color: '#666',
    },
    emptyContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
    },
    emptyImage: {
        width: 200,
        height: 200,
        marginBottom: 16,
    },
    emptyText: {
        fontSize: 16,
        color: '#999',
        textAlign: 'center',
    },
    loadingMoreContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 15,
    },
    loadingMoreText: {
        marginLeft: 8,
        fontSize: 14,
        color: '#666',
    },
    imageModalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imageModalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    fullScreenImage: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    clearButton: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 40,
        height: 40,
        paddingHorizontal: 8,
    },
    clearButtonText: {
        color: '#999',
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
    },
}); 